<template>
	<view>
		<view class="Take_box">
			<view class="Title">
				<view class="d-flex a-center p-left20">
					<text class="iconfont icon-qiandao color_33 size34 p-right20"></text>
					<text class="black size30">排队取号</text>
				</view>
			</view>
			<view class="Box" v-if="Info.in_line == 0">
				<text class="Box_title">{{line_up_num_text}}</text>
				<view class="Now" @click="show = true">立即取号</view>
			</view>

			<view class="fulBox" v-else>
				<text class="black size36">就餐号</text>
				<text class="size84" :class="[line_detail_state]">{{line_detail.num}}</text>
				<text class="size26" :class="[line_detail_peopel]">就餐人数{{line_detail.people}}位</text>
				<text class="color m-top24 h6">{{lineTxt}}</text>
				<view class="Now" @click="line_detail_btn">{{line_detail.button_msg}}</view>
			</view>


		</view>



		<u-modal :show="show" @cancel="show = false" title="就餐人数" :confirmColor="color" showCancelButton
			@confirm="Takeconfirm" confirmText="取号" asyncClose>
			<view class="slot-content showContent">
				<u-number-box v-model="people" integer>
					<view slot="minus" class="minus">
						<u-icon name="minus" size="12"></u-icon>
					</view>
					<input slot="input" type="number" style="width: 50px;text-align: center; " class="input"
						:value="people" />

					<view slot="plus" class="plus">
						<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
					</view>
				</u-number-box>
				<text class="color m-top24 h6">取号成功后请注意现场叫号通知，如叫号过期，请重新取号。</text>
			</view>

		</u-modal>

		<u-modal :show="Successful " @cancel="Successful = false" title="取号成功" @confirm="Successful = false">
			<view class="slot-content fulcontent">
				<text class="black size84 ">{{line_detail.num}}</text>
				<text class="color_33 size26">就餐人数{{line_detail.people}}位</text>
				<text class="color m-top24 h6">您前边还有{{Info.line_up_num}}位，请注意现场叫号通知，如叫号过期，请重新取号。</text>
			</view>

		</u-modal>

		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<!-- 0：新叫号 1：已应约 2：过期 3:撤销 -->
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['pageData', 'Info', 'shop_id', 'line_detail'],
		data() {
			return {
				showModal: false,
				show: false,
				Successful: false,
				people: 1,
				content: '取号成功后请注意现场叫号通知，如叫号过期， 请重新取号。 ',
				newData: false,
			}
		},
		methods: {
			Takeconfirm(e) {
				if (!this.vid) return this.showModal = true
				this.newData = true
				this.$http.post({
					url: '/LineUpApi/doLineUp',
					data: {
						shop_id: this.shop_id,
						people: this.people
					}
				}).then(res => {
					if (res.code != 200) {
						this.$Toast(res.msg)
						this.show = false
						return
					}
					this.Update();
					this.show = false

				})
			},

			line_detail_btn() {
				if (this.line_detail.state == 0) return this.CancelLineUp()
				if (this.line_detail.state == 1) return this.toUrl(`/otherPage/custom/placeOrder`)
				if (this.line_detail.state == 2 || this.line_detail.state == 3) return this.show = true
			},

			CancelLineUp() {
				this.$showLoading('')
				this.$http.post({
					url: '/LineUpApi/CancelLineUp',
					data: {
						id: this.line_detail.id,
						shop_id: this.shop_id,
					}
				}).then(res => {
					this.$hideLoading()
					if (res.code != 200) return this.$Toast(res.msg)
					this.Update()
				})
			},

			Update() {
				this.$emit('LineUpShop')
			}

		},
		watch: {
			Info(newVal, oldVal) {
				if (newVal && this.newData) {
					this.newData = false;
					this.Successful = true
				}
			},

		},
		computed: {
			...mapState(['color', 'vid']),
			line_detail_state() {
				if (this.line_detail.state == 2 || this.line_detail.state == 3) {
					return 'color_cc line-through'
				} else {
					return 'black'
				}
			},
			line_detail_peopel() {
				if (this.line_detail.state == 2 || this.line_detail.state == 3) {
					return 'color_cc'
				} else {
					return 'color_33'
				}
			},
			lineTxt() {
				const objState = {
					0: `您前边还有${this.Info.line_up_num}位，请注意现场叫号通知，如叫号过期，请重新取号。`,
					2: '当前排号已过期，需要重新取号',
					3: '当前排号已撤销，需要重新取号'
				}
				return objState[+this.line_detail.state]
			},
			line_up_num_text() {
				return this.Info.line_up_num > 0 ? `当前队列 ${this.Info.line_up_num} 位` : '暂无排队'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Take_box {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.Title {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid $page;
	}

	.Box {
		width: 100%;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&_title {
			color: #000;
			font-size: 32rpx;
		}


	}

	.Now {
		width: 260rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		background-color: var(--color);
		margin-top: 20rpx;
	}

	.fulBox {
		width: 80%;
		margin: 0 auto;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.showContent {
		width: 80%;
		margin: 24rpx auto 0;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.fulcontent {
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
		font-size: 32rpx;
		color: #000;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>